<template>
  <view class="cart">


    <!-- 头部 -->
    <view class="header">
      <text class="tit">购物车</text>
      <text class="tit-edit" @click="store.isEdit = !store.isEdit">{{ store.isEdit === true ? '完成' : '编辑' }}</text>
    </view>

    <!-- 内容 -->

    <!-- 如果购物车为空 -->
    <template v-if="store.disSelect">
      <view class=" d-flex a-center j-center bg-white" :style="'height:' + scrollH + 'px'">
        <text class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></text>
        <text class="text-light-muted mx-2">购物车还是为空</text>
        <text class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">去逛逛</text>
      </view>
    </template>

    <!-- 购物车列表 -->
    <template v-else>
      <scroll-view class="goods-list" scroll-y="true" :style="'height:' + scrollH + 'px'">
        <view class="cart-list" v-for="(item, index) in store.list" :key="index">

          <view class="cart-item">
            <label class="radio" style="width: 80rpx;height: 80rpx;" @click="store.selectItem(index)">
              <radio :value="item.id.toString()" :checked="item.checked" color="#FD6801" />
            </label>
            <image :src="item.cover" mode="" />
            <view class="item-desc">
              <view class="title">{{ item.title }}</view>
              <view class="desc">{{ item.desc }}</view>
              <view class="choose-num">
                <text class="price">&yen;{{ item.price }}</text>
                <view>
                  <button @click="item.num--">-</button>
                  <text>{{ item.num }}</text>
                  <button @click="item.num++">+</button>
                </view>
              </view>
            </view>
          </view>

        </view>

      </scroll-view>

    </template>

    <!-- 底部 -->
    <!-- 如果 不编辑正常显示 -->
    <template v-if="!store.isEdit">
      <view class="check-out">
        <label @click='store.doSelectAll'>
          <!-- 全选 -->
          <radio color="#FD6801" :checked='store.checkedAll' :disabled="store.disSelect" ></radio>
        </label>
        <view class="data">
          <view class="total">
            合计
            <text class="price">
              &yen;{{ store.totalPrice }}
            </text>
          </view>
          <view class="close">
            结算
          </view>
        </view>
      </view>
    </template>

    <!-- 编辑  -->
    <template v-else>
      <view class="check-out">
        <label @click='store.doSelectAll'>
          <radio color="#FD6801" :checked='store.checkedAll' :disabled="store.disSelect"></radio>
        </label>
        <view class="operation">
          <view class="collect">
            移入收藏
          </view>
          <view class="del" @click="store.delGoods">
            删除
          </view>
        </view>
      </view>
    </template>

  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { useCart } from "@/store/cart";
import { onShow } from "@dcloudio/uni-app";


//获取系统信息(窗口高度)
let scrollH = ref(0)
onShow(() => {
  uni.getSystemInfo({
    success: (res) => {
      scrollH.value = res.windowHeight - uni.upx2px(180)
    }
  })
})

const store = useCart();


</script>

<style lang="scss" scoped>
.cart-list {
  .cart-item {
    display: flex;

    .radio {
      align-self: center;
    }

    image {
      width: 220rpx;
      height: 220rpx;
      padding-right: 30rpx;
    }

    .item-desc {
      flex: 1;

      .title {
        font-size: 40rpx;
        font-weight: 900;
        padding-bottom: 20rpx;
      }

      .desc {
        color: #666;
        padding-bottom: 20rpx;

      }

      .choose-num {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price {
          color: #ff5470;
          justify-self: flex-start;
        }

        view {
          display: flex;
        align-items: center;
        justify-content: flex-end;
          button {
            margin: 0;
            padding: 0;
            height: 70rpx;
            line-height: 70rpx;
            width: 80rpx;
          }

          text {
            padding: 0 20rpx;
          }
        }

      }
    }
  }
}

.header {
  height: 80rpx;
  line-height: 80rpx;
  // display: flex;
  // justify-content: space-between;
  text-align: center;
  padding-right: 20rpx;

  .tit {
    padding-left: 67rpx;
  }

  .tit-edit {
    float: right;
  }

}

.goods-list {
  box-sizing: border-box;
  padding: 0 20rpx;

}


.check-out {
  display: flex;
  // position: fixed;
  // bottom: 0;
  // left: 0;
  height: 100rpx;
  width: 100vw;
  line-height: 100rpx;

  label {
    padding-left: 35rpx;
  }

  .data {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .total {
      display: flex;
      flex: 1;
      justify-content: center;

      .price {
        color: #ff5470;
      }
    }

    .close {
      background-color: #ff5470;
      flex: 1;
      text-align: center;
      color: #fff;
    }
  }

  .operation {
    flex: 1;
    display: flex;
    justify-content: space-between;
    text-align: center;
    color: #fff;

    .collect {
      flex: 1;
      background-color: #ff5470;
    }

    .del {
      flex: 1;
      background-color: #fde24f;
    }
  }
}
</style>